<template>
  <div>
      <p>请选择你喜欢的专栏</p>
      <input type="checkbox" value="科幻" v-model="hobby"><span>科幻</span> 
      <input type="checkbox" value="喜剧" v-model="hobby"><span>喜剧</span> 
      <input type="checkbox" value="动漫" v-model="hobby"><span>动漫</span> 
      <input type="checkbox" value="冒险" v-model="hobby"><span>冒险</span> 
      <input type="checkbox" value="科技" v-model="hobby"><span>科技</span> 
      <input type="checkbox" value="军事" v-model="hobby"><span>军事</span> 
      <input type="checkbox" value="娱乐" v-model="hobby"><span>娱乐</span> 
      <input type="checkbox" value="奇闻" v-model="hobby"><span>奇闻</span>

      <ul>
          <li v-for="(item,index) in hobby" :key="index">
              {{item}}
          </li>
      </ul>
  </div>
</template>

<script>
export default {
   data(){
       return{
           hobby:[]  
       }
   }
}
</script>

<style>

</style>